<template>
  <div>
    <!-- 学科'修改'的弹窗 -->
    <el-dialog :title="title" :visible="showdialog" @close="btnCancel">
      <!-- title插槽 -->
      <span slot="title">{{ title }}</span>

      <!-- 表单 -->
      <el-form ref="addSub" label-width="120px" :model="listdata" :rules="rules">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="listdata.subjectName" placeholder="请输入学科名称" />
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch
            :v-model="listdata.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />

        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { tagsdatails, editSubList, addSubList } from '@/api/subject'

export default {
  props: {
    showdialog: {
      type: Boolean
    },
    list: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 表单数据
      formData: {
        subjectName: '',
        isFrontDisplay: 1,
        title: ''
      },
      value: true,
      value1: true,
      value2: false,
      // 定义校验规则
      rules: {
        subName: [{ required: true, message: '学科名称不能为空', trigger: 'blur' },
        { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/, trigger: 'blur', message: '学科名称不能为空' }]
      }

      // computed: {
      //
      //   }
      // },

    }
  },
  computed: {
    listdata: {
      set() { },
      get() { return this.list }
    },
    title() {
      return this.formData.title ? '修改学科' : '新增学科'
    }
  },
    created() {
      console.log(this.listdata, '=-=-=-=-=-=')
    },
    methods: {
      // 取消、关闭弹窗
      btnCancel() {
        // 清空表单数据
        // 重置校验结果
        this.$refs.addSub.resetFields()
        // 关闭弹窗
        this.$emit('update:showdialog', false)
        // this.title = '新增学科'
        this.inputShow = true
      },
      // 确定按钮
      async btnOK() {
        if (this.formData.id) { // 编辑
          console.log(this.formData, '==========1111')
          // 1.调用方法
          this.formData.create_time = null
          this.formData.last_update_time = null
          console.log(this.formData, '=-------------=')
          await editSubList(this.formData.id, this.formData)
          // 2.关闭弹窗
          this.$emit('update:showdialog', false)
          // 3.刷新页面
          this.$emit('reAfterAdd')
          // 4.提示信息
          this.$message.success('编辑学科信息成功！')
          //
        } else { // 添加
          // 1.调用方法
          console.log(this.formData, 'add add add')
          await addSubList(this.formData)
          // 2.关闭弹窗
          this.$emit('update:showdialog', false)
          // 3.刷新页面
          this.$emit('reAfterAdd')
          // 4.提示信息
          this.$message.success('添加用户成功！')
        }
      },
      // 添加科目方法
      async addSubList(data) {
        await addSubList(data)
        this.$emit('reAfterAdd')
      },

      // 编辑回填
      async rePut(id) {
        // this.title = '修改学科'
        this.inputShow = false
        // console.log('这是子组件，拿到了当前点击的SUBID，下面开始获取详细学科信息', id)
        const res = await tagsdatails(id)
        // console.log(res, '这是获得的详细用户信息')
        this.formData = res
      }
    }
  }
</script>
<style>

</style>
